<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索页</title>
    <!-- 引入核心的css文件 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
    <!-- 引入图标样式文件 -->
    <link rel="stylesheet" href="./libs/font/bootstrap-icons.css">
    <style>
        .bi {
            font-size: 30px !important;
            cursor: pointer;
            vertical-align: middle;
        }

        .empty {
            text-align: center;
            font-size: 26px;
            color: #ccc;
            padding: 30px 0px;
        }

        a,
        a:hover {
            color: #000;
        }

        ul li {
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <header class="search-header d-flex p-5 justify-content-start bg-info">
                <!-- 返回 -->
                <div style="width: 60px; color: #fff;">
                    <i class="bi bi-arrow-left-square my_back_button"></i>
                </div>
                <input type="text" placeholder="请输入英文词汇" class="form-control my_search_input"
                    style="width: calc(100% - 160px); height: 50px;">
                <button class="btn btn-primary text-white my_search_button"
                    style="width: 100px; height: 50px; flex-shrink: 0;">搜索</button>
            </header>

            <div class="alert alert-danger my_alert" role="alert" style="display: none;">
                提示:
            </div>

            <section class="search-main mt-3 p-2">
                <ul class="list-group list-group-flush my_search_list">
                    <!-- <li class="list-group-item">
                        <a href="#">
                            <div>
                                <span>词汇</span>  
                                <i class="bi bi-volume-down"></i>
                                <span>音标</span>
                                 <span>翻译</span>
                            </div>
                            <div>
                                <span>词义</span>
                            </div>
                            <div>
                                <span>句子</span>
                                <i class="bi bi-volume-down"></i>
                            </div>
                            <div>
                                句子翻译
                            </div>
                        </a>
                    </li> -->

                </ul>

                <div class="empty">
                    <p>暂无搜索结果~~</p>
                </div>
            </section>
        </div>
    </div>

    <!-- 引入jquery文件 -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 引入bootstrap核心JS文件 -->
    <script src="./libs/bootstrap/js/bootstrap.bundle.js"></script>
      <!-- 引入配置文件 -->
      <script src="./config/index.js"></script>
    <!-- 引入search.js自己的脚本文件 -->
    <script src="./javascripts/search.js"></script>
</body>

</html>


<!-- 
- 请求地址: /search
- 请求方式: GET
- 提交的参数: kw
- 响应数据格式: json格式
- 请求示例: http://127.0.0.1:7000/search?kw=a

-->